<template>  
    <view class="container">  
		<!-- 个人信息 -->
		<view class="user-section">
			<image class="bg" src="/static/user-bg.jpg"></image>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.image || '/static/missing-face.png'"></image>
				</view>
				<view class="info-box">
					<text class="username">{{userInfo.nickname || userInfo.username || '游客'}}</text>
					<text class="level">等级：{{userInfo.level}}</text>
				</view>
				<view class="signIn" @click="navTo('/pagesA/sign/sign')">签到 ></view>
			</view>
		</view>
		<view class="cover-container" :style="[{transform: coverTransform,transition: coverTransition}]" @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend" >
			<!-- <image class="arc" src="/static/arc.png"></image> -->
			<view class="tj-sction">
				<view class="tj-item" @click="navTo('/pagesA/wallet/wallet')">
					<text class="num">{{userInfo.amount || "0.00"}}</text>
					<text>余额</text>
				</view>
				<view class="tj-item" @click="navTo('/pages/user/coupon/coupon?state=0')">
					<text class="num">{{userInfo.coupon || 0}}</text>
					<text>优惠券</text>
				</view>
				<view class="tj-item" @click="navTo('/pagesA/integral/integral')">
					<text class="num">{{userInfo.point || 0}}</text>
					<text>积分</text>
				</view>
				<!-- <view class="tj-item" @click="navTo('/pagesA/lack/comRele/comRele')">
					<text class="num">{{userInfo.amount || "0.00"}}</text>
					<text>评论</text>
				</view> -->
			</view>
			<!-- 订单 -->
			<view class="order-section">
				<view class="orderFlex" @click="navTo('/pages/user/order/order?state=0')" hover-class="common-hover"  :hover-stay-time="50">
					<view class="addTit">我的订单</view>
					<view class="more">全部订单 ></view>
				</view>
				<view class="orderBoxs">
					<view class="order-item" @click="navTo('/pages/user/order/order?state=1')" hover-class="common-hover"  :hover-stay-time="50">
						<text class="iconfont icon-daizhifu"></text>
						<text class="orderN">待支付</text>
						<span class="dot" v-if="wait_pay">{{wait_pay}}</span>
					</view>
					<view class="order-item" @click="navTo('/pages/user/order/order?state=2')" hover-class="common-hover"  :hover-stay-time="50">
						<text class="iconfont icon-daifahuo"></text>
						<text class="orderN">待发货</text>
						<span class="dot" v-if="wait_delivery">{{wait_delivery}}</span>
					</view>
					<view class="order-item" @click="navTo('/pages/user/order/order?state=3')"  hover-class="common-hover" :hover-stay-time="50">
						<text class="iconfont icon-daishouhuo"></text>
						<text class="orderN">待收货</text>
						<span class="dot" v-if="wait_confirm">{{wait_confirm}}</span>
					</view>
					<view class="order-item" @click="navTo('/pages/user/order/order?state=4')" hover-class="common-hover"  :hover-stay-time="50">
						<text class="iconfont icon-daipingjia"></text>
						<text class="orderN">待评价</text>
						<span class="dot" v-if="wait_comment">{{wait_comment}}</span>
					</view>
					<view class="order-item" @click="navTo('/pages/user/order/orderReturn')" hover-class="common-hover"  :hover-stay-time="50">
						<text class="iconfont icon-tuikuan"></text>
						<text class="orderN">退款/售后</text>
						<span class="dot" v-if="after">{{after}}</span>
					</view>
				</view>
			</view>
			<!-- 浏览历史 -->
			<!-- <view class="history-section icon">
				<view class="sec-header">
					<text class="iconfont icon-shijian"></text>
					<text>浏览历史</text>
				</view>
				<scroll-view scroll-x class="h-list">
					<block v-for="(item ,index) in browse" :key='index'>
						<image @click="navTo('/pages/category/product/product?id='+item.goods_id)" :src='item.thumb_img' mode="aspectFill"></image>
					</block>
				</scroll-view>
			</view> -->
			<!-- 分类 -->
			<view class="history-section icon" style="padding-top:0;">
				<view class="addTit">常用工具</view>
				<view class="secWeb">
					<view class="secList" @click="navTo('/pagesA/perInfo/perInfo')">
						<text class="iconfont icon-nav_profile"></text>
						<text class="secName">个人资料</text>
					</view>
					
					<view class="secList" @click="navTo('/pages/user/address/address')">
						<text class="iconfont icon-dizhi1"></text>
						<text class="secName">收货地址</text>
						
					</view>
					<view class="secList" @click="navTo('/pagesA/wallet/wallet')">
						<text class="iconfont icon-wallet-fill"></text>
						<text class="secName">我的钱包</text>
						<!-- <text class="yticon icon-you"></text> -->
					</view>
					<view class="secList" @click="navTo('/pagesA/collect/collect')">
						<text class="iconfont icon-shoucang-collect"></text>
						<text class="secName">我的收藏</text>
					</view>
					
					<view class="secList" @click="navTo('/pagesA/notice/notice')">
						<text class="iconfont icon-pinglun-mian"></text>
						<text class="secName">站内消息</text>
						<span class="dot" v-if="new_message">{{new_message}}</span>
					</view>
					<view class="secList" @click="navTo('/pagesA/set/set')">
						<text class="iconfont icon-set"></text>
						<text class="secName">设置</text>
					</view>
					
				</view>
			</view>
			
			<view class="history-section icon" style="padding-top:0;">
				<view class="addTit">系统帮助</view>
				<view class="secWeb">
					<view class="secList" @click="navTo('/pagesA/notice/help')">
						<text class="iconfont icon-pinglun-mian"></text>
						<text class="secName">帮助中心</text>
					</view>
					
				</view>
			</view>
		</view>
    </view>  
</template>  
<script>  
	// import listCell from '@/components/mix-list-cell';
    import {mapState} from 'vuex';
    import {mapMutations} from 'vuex'; 
	let startY = 0, moveY = 0, pageAtTop = true;
    export default {
		// components: { listCell },
		data(){
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				browse:[],
				flag:'',
				wait_pay:0,
				wait_delivery:0,
				wait_confirm:0,
				wait_comment:0,
				after:0,
				new_message:0,
			}
		},
		onShow() {
			var that = this
			if(!that.hasLogin){
				uni.redirectTo({
					url:'/pages/public/login'
				})
				return false
			}
			let _param = {
				token:that.userInfo.token
			}
			
			that.$api.getUrl(that.$api._api.ApiUserIndex,_param,function(res){
				let _user = that.userInfo
				_user.amount = res.money
				_user.point = res.point
				_user.level = res.level
				_user.coupon = res.coupon
				_user.username = res.username
				_user.image = res.image
				that.new_message = res.new_message
				that.login(_user)
				
				for(let index in res.order){
					let value = res.order[index]
					if(index == 0){
						that.wait_pay = value
					}else if(index == 1){
						that.wait_delivery = value
					}else if(index == 2){
						that.wait_confirm = value
					}else if(index == 3){
						that.wait_comment = value
					}
				}
				
			})
	
		},
		onShow2() {
			/* var that = this
			if(!this.hasLogin){
				uni.redirectTo({
					url:'/pages/public/login'
				})
				return false
			}
			
			this.flag = this.userInfo.flag
			var _browse = uni.getStorageSync("browse")
			if(_browse){this.browse = _browse} */
			
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pagesA/set/set');
			}else if(index === 1){
				/* const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				}); */
				uni.navigateTo({
					url: '/pagesA/notice/notice'
				})
			}
		},
		// #endif
        computed: {
			...mapState(['hasLogin','userInfo'])
		},
		onLoad() {
			this.$api.setCartNumber();
		},
        methods: {
			logOut:function(){
				uni.showModal({
					title: "确认退出",
					content: '您确认要退出吗？',
					//showCancel: false,
					confirmText: "确定",
					success:function(res){
						if(res.confirm){
							uni.clearStorage();
							uni.navigateTo({
								url:'../public/login'
							})
						}
					}
				})
			},
			
			...mapMutations(['login']),
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url){
				if(!this.hasLogin){
					url = '/pages/public/login';
				}
				uni.navigateTo({  
					url
				})  
			}, 
			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e){
				if(pageAtTop === false){
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e){
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if(moveDistance < 0){
					this.moving = false;
					return;
				}
				this.moving = true;
				if(moveDistance >= 80 && moveDistance < 100){
					moveDistance = 80;
				}
		
				if(moveDistance > 0 && moveDistance <= 80){
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend(){
				if(this.moving === false){
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			coupon:function(url){
				uni.showModal({
					title:'提示',
					content:'功能开发中，敬请期待！',
					showCancel:false
				})
			},
        }  
    }  
</script>  
<style lang='scss'>
	.addTit{
		padding: 0 30rpx;height:100rpx;line-height:100rpx;border-bottom: 1px solid #eee;
		padding-bottom: 10px;font-weight: bold;
	}
	page{background: #eee;}
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10rpx;
	}
	.user-section{
		height:400rpx;
		padding: 100rpx 30rpx 0;
		position:relative;
		border-radius: 0 0 100% 100% / 0 0 10% 10%;
		overflow: hidden;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}
	.user-info-box{
		height: 180rpx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		.info-box{flex: 1;}
		.signIn{background:rgba(250,67,106,0.6);color:#fff;border-radius:100rpx 0 0 100rpx;
			height:60rpx;line-height:60rpx;padding: 0 20rpx 0 40rpx;font-size:26rpx;
			margin-right: -30rpx;margin-top:100rpx;}
		.portrait{
			width: 130rpx;
			height: 130rpx;
			border:5rpx solid #fff;
			border-radius: 50%;
		}
		.username{
			font-size: $font-lg + 6rpx;
			color: $font-color-dark;
			margin-left: 20rpx;
			display: block;
		}
		.level{
			display: block;
			margin-left: 20rpx;
			line-height: 50rpx;
			font-size: $font-sm;
		}
	}
	.cover-container{
		margin-top: -90rpx;
		padding: 0 30rpx;
		position:relative;
		padding-bottom: 20rpx;
		.arc{
			position:absolute;
			left: 0;
			top: -34rpx;
			width: 100%;
			height: 36rpx;
		}
	}
	.tj-sction{
		@extend %section;
		.tj-item{
			@extend %flex-center;
			flex-direction: column;
			height: 140rpx;
			font-size:26rpx;
			color: #75787d;
		}
		.num{
			font-size:32rpx;
			color: $font-color-dark;
			margin-bottom: 8rpx;
			font-weight: bold;
		}
	}
	.order-section{
		@extend %section;
		/* padding: 28rpx 0; */
		margin-top: 20rpx;
		display: block;
		.orderBoxs{display: flex;align-items: center;justify-content: space-around;padding: 30rpx 0;}
		.orderFlex{display: flex;align-items: center;border-bottom: 1px solid #eee;
			.addTit{flex: 1;border-bottom: none;}
			.more{padding-right: 30rpx;font-size:24rpx;color:#999;}
		}
		.order-item{
			@extend %flex-center;
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			font-size: $font-sm;
			color: $font-color-dark;
			position: relative;
			span{
				position: absolute;
				width: auto;
				height: 16px;
				line-height: 16px;
				border-radius: 16px;
				min-width: 16px;
				font-size: 12px;
				text-align: center;
				white-space: nowrap;
				top: 0;
				right: 26rpx;
				background-color: #fa436a;
				color: #fff;
				transform: translate(40%,-20%);
			}
		}
		.orderN{font-size: 26rpx;}
		.iconfont{
			font-size:50rpx;
			margin-bottom: 18rpx;
			color: #fa436a;
			height: 56rpx;
			line-height: 56rpx;
			display: block;
		}
		.icon-daizhifu{font-size:43rpx;}
		.icon-daishouhuo{font-size: 56rpx;}
		.icon-daipingjia{font-size:44rpx;}
		.icon-tuikuan{font-size: 46rpx;}

	}
	.history-section{
		padding: 30rpx 0 0;
		margin-top: 20rpx;
		background: #fff;
		border-radius:10rpx;
		.sec-header{
			display:flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40rpx;
			margin-left: 30rpx;
			.iconfont{
				font-size: 40rpx;
				color: #5eba8f;
				margin-right: 16rpx;
				line-height: 40rpx;
			}
		}
		.h-list{
			white-space: nowrap;
			padding: 30rpx 30rpx 0;
			image{
				display:inline-block;
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
			}
		}
	}
	/* 分类 */
	.secWeb{
		display:flex;flex-wrap:wrap;margin-top:20rpx;padding-bottom:10rpx;
		.secList{
			width: 25%;text-align: center;margin-bottom:30rpx;
			position: relative;
			.secName{flex:1;font-size: 26rpx;}
			text{display: block;}
			.iconfont{font-size:58rpx;min-height:80rpx;line-height:80rpx;}
			.icon-wallet-fill{color:#FA436A;}
			.icon-dizhi1{color:#25c90f;}
			.icon-fenxiaoshang{color:#08f;}
			.icon-dianpu1{color:#ee883b;}
			.icon-shenqingguanli{color:#ee883b;}
			.icon-shoucang-collect{color:#ff6600;font-size: 56rpx;}
			.icon-set{color:#13b3ac;font-size:61rpx;}
			.icon-iconleijiguanzhu{color:#fe4d5f;font-size: 60rpx;}
			.icon-pinglun-mian{color:#e42fc5;font-size: 52rpx;}
			.icon-nav_profile{color:#8900ff; font-size:46rpx;}  /* 个人资料 */
			.icon-tuichu2{color:#f16d00; font-size:46rpx;} /* 退出登录 */
			span{
				position: absolute;
				width: auto;
				height: 16px;
				line-height: 16px;
				border-radius: 16px;
				min-width: 16px;
				font-size: 12px;
				text-align: center;
				white-space: nowrap;
				top: 0;
				right: 46rpx;
				background-color: #fa436a;
				color: #fff;
				transform: translate(40%,-20%);
			}
		}
	}
</style>